import React, { Component } from 'react';
import { connect } from 'dva';
import { Flex } from 'antd-mobile';
import { test } from './test.less';

import SearchBarMy from '../../components/SearchBar/SearchBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';




class Test extends Component {
    constructor(props) {
      super(props);
        this.state={
           data:"<span id='1'>24号对于边界、空值、格式错误、溢出这几个类型，一个功能如有多个数据项测试类型相同。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span> " +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>" +
           "<span id='2'>测试用例均为最小的用例覆盖要求；对于没有提及的用例类型，视业务需求情况，撰写相应用例。</span>",
            display:"none",
            top:0
        }
        this.timer=null;
        this.isClick=false;
    }
    componentDidMount() {
       this.test.addEventListener("touchstart",this.testStart,false);
        this.test.addEventListener("touchmove",this.testMove,false);
        this.test.addEventListener("touchend",this.testEnd,false);
    }
    testStart = (e) =>{
       // console.log(e);
        this.setState({
            display:'none',
            //top:args.touches[0].pageY-100-args.target.offsetHeight
        })
        //let context =this;
       // console.log(this);
       // e.preventDefault();
        let args=e;

        // bindLongClick = (en) =>{
        //     console.log(en);this.longClick(en)
        // }

        this.timer=setTimeout(() => {
            //console.log(args);
            console.log(args.touches[0].pageY);
            this.longClick(args)
            //this.longClick.apply(context, args);
        },1000);
        //e.stopPropagation();
        //e.nativeEvent.stopImmediatePropagation();
        //e.cancelBubble = true;
        //return false;
    }
    longClick = (args)=>{

        this.isClick=true;
        console.log(args.target.offsetHeight);
        args.target.classList.toggle("select");
        if(args.touches[0].pageY-100-args.target.offsetHeight<0){
            this.setState({
                display:'block',
                top:100
            })
        }else {
            console.log(args.touches[0].pageY-args.target.offsetHeight);
            this.setState({
                display:'block',
                top:args.touches[0].pageY-100-args.target.offsetHeight
            })
        }


        //let div = document.createElement("div");
       // div.setAttribute("class","action");
        //args.target.appendChild(div);

    }
    testMove = (e) =>{
        //console.log(2);
       // console.log(this.isClick==false);
        // e.preventDefault();
        if(this.isClick==false&&this.timer!=null){
            //console.log(2.1);
            clearTimeout(this.timer);

        }else {
            e.stopPropagation();
        }




        //e.nativeEvent.stopImmediatePropagation();
        //e.cancelBubble = true;
        //return false;
    }
    testEnd = (e) =>{
       // console.log(e);
        console.log(3);
        // e.preventDefault();
        if(this.timer!=null){
            //console.log(3);
            clearTimeout(this.timer);
            //e.stopPropagation();
        }
        this.isClick=false;
        // this.setState({
        //     display:'none',
        //     //top:args.touches[0].pageY-100-args.target.offsetHeight
        // })

        //e.nativeEvent.stopImmediatePropagation();
        //e.cancelBubble = true;
        //return false;
    }

    render() {
        //console.log(this.props)

        //const { floorList, activityBeenList, advPosition, recommendGoodslist } = this.props.home;
        //console.log(advPosition);
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                //justify="between" alignContent="stretch"
            >
                <SearchBarMy></SearchBarMy>
                <MyScroll>
                     <div className={test}>
                         <div
                             ref={(node)=>this.test=node}
                             //onTouchEnd={this.testClick}
                             //onTouchMove={this.testClick}
                             //onTouchStart={this.testClick}
                             // style={{height: '5rem'}}
                              dangerouslySetInnerHTML={{
                                  __html: this.state.data
                              }}>
                         </div>

                     </div>
                </MyScroll>
                <div className="action" style={{
                    display:this.state.display,
                    top:this.state.top+"px",
                    left:'50%',
                    marginLeft:'-0.5rem'
                }}></div>
                <NavBottomBar></NavBottomBar>
            </Flex>

        );
    }
}


export default connect(({ app }) => ({ app }))(Test);
